<template>
  <div class="box">
    <list v-loading="isLoadFlag" :list-arr="listArr" />
  </div>
</template>
<script>
import list from '../../components/list.vue';
export default {
  components: {
    list
  },
  data() {
    return {
      listArr: [],
      // 通过isLoadFlag来控制动画是否开启
      isLoadFlag: false
    };
  },
  created() {
    this.sendAPi();
  },
  methods: {
    sendAPi() {
      this.isLoadFlag = true; // 开启加载动画
      setTimeout(() => {
        this.listArr = [
          { name: '王仙芝', dec: '白帝转世' },
          { name: '邓太阿', dec: '徐凤年的舅舅' },
          { name: '齐玄帧', dec: '五百年前的吕祖' },
          { name: '李淳罡', dec: '当初的实力是绝对的天下第一的' },
          { name: '曹长卿', dec: '占天象八斗风流，实力排进天下前三' }
        ];
        // 移除加载动画
        this.isLoadFlag = false;
      }, 3000);
    }
  }
};
</script>
<style scoped>
.box {
  margin-top: 20px;
  width: 100%;
  text-align: center;
  font-size: 18px;
  line-height: 2;
  color: gray;
}
</style>
